<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../static/css/cover.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>3D密集架</title>
    <script type="text/javascript" src="../static/js/three.js"></script>
    <script src="../static/js/stats.min.js"></script>
    <script src="../static/js/DragControls.js"></script>
    <script src="../static/js/OrbitControls.js"></script>
    <script src="../static/js/FirstPersonControls.js"></script>
    <script src="../static/js/TransformControls.js"></script>
    <script src="../static/js/dat.gui.min.js"></script>
    <script src="../static/js/EffectComposer.js"></script>
    <script src="../static/js/RenderPass.js"></script>
    <script src="../static/js/OutlinePass.js"></script>
    <script src="../static/js/FXAAShader.js"></script>
    <script src="../static/js/CopyShader.js"></script>
    <script src="../static/js/ShaderPass.js"></script>
    <script src="../static/js/ThreeBSP.js"></script>
    <script src="../static/js/ThreeJs_Drag.js" charset="UTF-8"></script>
    <script src="../static/js/ThreeJs_Composer.js" charset="UTF-8"></script>
    <script src="../static/js/Tween.js"></script>
    <script src="../static/js/jquery-1.11.0.min.js"></script>
    <script src="../static/js/content.js"></script>
    <script src="../static/js/configure.js"></script>
    <script src="../static/js/websocket.js" charset="UTF-8"></script>
</head>
<body>
<div id="infoWrap">
    <div class="info" id="scene">
        <img src="../static/images/vr-btn-scene.png"/>
        <div class="img_desc_min">选择</div>
    </div>
    <div class="info" id="music">
        <input id="qu_id" type="number" width="50px"/>
        <div class="img_desc_min">区</div>
        <input id="lie_id" type="number" width="50px"/>
        <div class="img_desc_min">列</div>
        <button id="confirm">确定</button>
        <button id="leftMove">左移</button>
        <button id="rightMove">右移</button>
        <button id="unlock">解锁</button>
        <button id="lock">锁定</button>
        <button id="hejia">合架</button>
        <button id="reset">重置</button>
    </div>
</div>
<script>
    const stats = initStats();
    let scene, camera, renderer, controls, child, raycaster, outlinePass, composer;
    let groups = [];
    let selectGroup, selectIndex;
    create("ws://192.168.2.130:12345/ws", function (event) {
        let receiveData = JSON.parse(event.data);
        console.log("收到的消息=", receiveData);
        switch (receiveData.code) {
            case "1":
                sendMsg(JSON.stringify({
                    url: "192.168.2.40",
                    port: "8005",
                    code: "2006",
                    data: {
                        code: 2006,
                        data: null
                    }
                }));
                break;
            case "2001"://实时位移数据
                let realData = JSON.parse(receiveData.data);
                updateFrame(1, realData.direction, realData.moveData);
                break;
        }

    });
    initScene();
    initFrame();
    initControls();
    initPass();
    animate();


    $(function () {
        $("#confirm").click(function () {
            let qu = $("#qu_id").val();
            if (qu > groups.length) {
                qu = groups.length;
            } else if (qu < 1) {
                qu = 1;
            }
            selectGroup = groups[qu - 1];
            selectIndex = $("#lie_id").val();
            if (selectIndex < 1) {
                selectIndex = 1;
            }
            let selectLie = selectGroup.children[selectIndex - 1];
            choose(selectLie);
            sendMsg(JSON.stringify({
                url: "192.168.2.40",
                port: "8005",
                code: "1"
            }));
            play(selectLie.children[0].position.x, (qu === "1") ? 0 : 1);
        });
        $("#leftMove").click(function () {
            sendMsg(JSON.stringify({
                url: "192.168.2.40",
                port: "8005",
                code: "3002",
                data: {
                    code: 3002,
                    data: {
                        lie: 1,
                        direction: 1
                    }
                }
            }));
        });
        $("#rightMove").click(function () {
            sendMsg(JSON.stringify({
                url: "192.168.2.40",
                port: "8005",
                code: "3002",
                data: {
                    code: 3002,
                    data: {
                        lie: 1,
                        direction: 2
                    }
                }
            }));
        });
        $("#unlock").click(function () {
            sendMsg(JSON.stringify({
                url: "192.168.2.40",
                port: "8005",
                code: "3006",
                data: {
                    code: 3006,
                    data: {
                        direction: 2,
                        status: 1
                    }
                }
            }));
        });
        $("#lock").click(function () {
            sendMsg(JSON.stringify({
                url: "192.168.2.40",
                port: "8005",
                code: "3006",
                data: {
                    code: 3006,
                    data: {
                        direction: 2,
                        status: 0
                    }
                }
            }));
        });
        $("#hejia").click(function () {
            sendMsg(JSON.stringify({
                url: "192.168.2.40",
                port: "8005",
                code: "3004",
                data: {
                    code: 3004,
                    data: {
                        direction: 2
                    }
                }
            }));
        });
        $("#reset").click(function () {
            new TWEEN.Tween(scene.rotation)
                .to({x: 0, y: 0, z: 0}, 1000)
                .easing(TWEEN.Easing.Quadratic.InOut)
                .start();
            new TWEEN.Tween(scene.position)
                .to({x: 0, y: 0, z: 0}, 1000)
                .easing(TWEEN.Easing.Quadratic.InOut)
                .start();
            new TWEEN.Tween(camera.position)
                .to({x: 0, y: 1400, z: 2000}, 1000)
                .easing(TWEEN.Easing.Quadratic.InOut)
                .start();
        });

    });


    //初始化场景
    function initScene() {
        //场景
        scene = new THREE.Scene();

        //相机
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 10, 10000);
        camera.position.set(0, 1400, 2000);

        //渲染器
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        document.body.appendChild(renderer.domElement);

        //灯光
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源
        directionalLight.color.setHSL(0.1, 1, 0.95);
        directionalLight.position.set(0, 200, 0).normalize();
        scene.add(directionalLight);
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
        ambient.position.set(0, 0, 0);
        scene.add(ambient);

    }

    //初始化架体
    function initFrame() {
        //初始化地板
        createFloor(scene, window.config.sceneLength, window.config.sceneWidth, window.config.floorHeight);
        //左面墙
        scene.add(createCube(10, 200, window.config.sceneWidth, 0, -window.config.sceneLength / 2, 100, 0, "墙面"));
        //右面墙
        scene.add(createCube(10, 200, window.config.sceneWidth, 1, window.config.sceneLength / 2, 100, 0, "墙面"));
        //后面墙
        scene.add(createCube(10, 200, window.config.sceneLength, 1.5, 0, 100, -window.config.sceneWidth / 2, "墙面"));

        let fronWallPositionZ = window.config.sceneWidth / 2;
        //前面墙
        const frontWall = createCube(window.config.sceneLength, 200, 10, 0, 0, 100, fronWallPositionZ, "墙面");

        const objects_cube = [];
        objects_cube.push(createCube(200, 180, 10, 0, -600, 90, fronWallPositionZ, "前门1"));
        objects_cube.push(createCube(200, 180, 10, 0, 600, 90, fronWallPositionZ, "前门2"));
        objects_cube.push(createCube(100, 100, 10, 0, -900, 90, fronWallPositionZ, "窗户1"));
        objects_cube.push(createCube(100, 100, 10, 0, 900, 90, fronWallPositionZ, "窗户2"));
        objects_cube.push(createCube(100, 100, 10, 0, -200, 90, fronWallPositionZ, "窗户3"));
        objects_cube.push(createCube(100, 100, 10, 0, 200, 90, fronWallPositionZ, "窗户4"));
        //布尔运算
        scene.add(createCubeBsp(frontWall, objects_cube));
        //创建门
        createLeftDoor(scene, 100, 180, 2, 0, -700, 90, fronWallPositionZ, "左门1");
       // createRightDoor(scene, 100, 180, 2, 0, -500, 90, fronWallPositionZ, "右门1");
        createLeftDoor(scene, 100, 180, 2, 0, 500, 90, fronWallPositionZ, "左门2");
       // createRightDoor(scene, 100, 180, 2, 0, 700, 90, fronWallPositionZ, "右门2");
        //创建窗户
        createWindow(scene, 100, 100, 2, 0, -900, 90, fronWallPositionZ, "窗户");
        createWindow(scene, 100, 100, 2, 0, 900, 90, fronWallPositionZ, "窗户");
        createWindow(scene, 100, 100, 2, 0, 200, 90, fronWallPositionZ, "窗户");
        createWindow(scene, 100, 100, 2, 0, -200, 90, fronWallPositionZ, "窗户");


        let trackLength = 1500;
        let track = createHorizontalTrack(scene, window.config.sceneLength / 2 - trackLength / 2, 1, -fronWallPositionZ + 200, trackLength);
        groups.push(createFrame(scene, 1, 2, false, 50, 200, 150, track.position.x - trackLength / 2 + (trackLength - 50 * 5) / 2 + 25, 100,
            -fronWallPositionZ + 250, 0, 5, "架体"));
        trackLength = 1000;
        track = createHorizontalTrack(scene, -window.config.sceneLength / 2 + trackLength / 2, 1, fronWallPositionZ - 250, trackLength);

        groups.push(createFrame(scene, 2, 8, true, 50, 200, 150, track.position.x - trackLength / 2 + (trackLength - 50 * 15) / 2 + 25,
            100, fronWallPositionZ - 225, 1, 15, "架体"));
        trackLength = 1200;
        track = createHorizontalTrack(scene, track.position.x + 1150, 1, fronWallPositionZ - 250, trackLength);
        groups.push(createFrame(scene, 3, 8, true, 50, 200, 150, track.position.x - trackLength / 2 + (trackLength - 50 * 17) / 2 + 25,
            100, fronWallPositionZ - 225, 1, 17, "架体"));
        trackLength = 1000;
        track = createHorizontalTrack(scene, track.position.x + 1150, 1, fronWallPositionZ - 250, trackLength);
        groups.push(createFrame(scene, 4, 8, true, 50, 200, 150, track.position.x - trackLength / 2 + (trackLength - 50 * 16) / 2 + 25, 100,
            fronWallPositionZ - 225, 1, 16, "架体"));

        trackLength = 1300;
        track = createHorizontalTrack(scene, track.position.x + 1200, 1, fronWallPositionZ - 250, trackLength);
        groups.push(createFrame(scene, 5, 8, true, 50, 200, 150, track.position.x - trackLength / 2 + (trackLength - 50 * 22) / 2 + 25, 100,
            fronWallPositionZ - 225, 1, 22, "架体"));
        console.log("groups=", groups);
    }

    function selectedObjectChanged(object) {
        const helper = new THREE.BoxHelper(object, "#ff0000");
        scene.add(helper);
    }

    function updateFrame(qu, direction, moveData) {
        let group = groups[qu - 1];
        let gdlPosition = group.gdl;//10
        if (direction === 2) {
            //左边
            for (let i = 0; i < gdlPosition; i++) {
                group.children[i].position.set(-moveData[i], 0, 0);
            }
        } else {
            for (let i = gdlPosition + 1; i < group.children.length; i++) {
                group.children[i].position.set(moveData[i - gdlPosition - 1], 0, 0);
            }
        }

    }

    //初始化控制器
    function initControls() {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        //启用阻尼
        controls.enableDamping = true;
        //阻尼因子
        controls.dampingFactor = 0.5;
        // 视角最小距离
        controls.minDistance = 100;
        // 视角最远距离
        controls.maxDistance = 3000;
        // controls.autoRotate = true;
        // controls.autoRotateSpeed = 0.2;
        // 最大角度
        controls.maxPolarAngle = Math.PI;
        //视角
        controls.target = new THREE.Vector3(50, 50, 0);
    }

    function initPass() {
        raycaster = new THREE.Raycaster();
        composer = new THREE.EffectComposer(renderer);
        var renderPass = new THREE.RenderPass(scene, camera);
        composer.addPass(renderPass);
        outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
        outlinePass.edgeStrength = 5;//包围线浓度
        outlinePass.edgeGlow = 0.5;//边缘线范围
        outlinePass.edgeThickness = 2;//边缘线浓度
        outlinePass.pulsePeriod = 2;//包围线闪烁频率
        outlinePass.visibleEdgeColor.set('#ffff00');//包围线颜色
        outlinePass.hiddenEdgeColor.set('#190a05');//被遮挡的边界线颜色
        composer.addPass(outlinePass);
        var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
        effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
        effectFXAA.renderToScreen = true;
        composer.addPass(effectFXAA);
    }

    function choose(obj) {
        outlinePass.selectedObjects = [];
        outlinePass.selectedObjects.push(obj);
    }

    function play(positionX, angle) {
        new TWEEN.Tween(scene.rotation)
            .to({x: 0, y: (Math.PI * angle), z: 0}, 500)
            .easing(TWEEN.Easing.Quadratic.InOut)
            .onComplete(function () {
                new TWEEN.Tween(scene.position)
                    .to({
                        x: angle === 0 ? -positionX : positionX,
                        y: 200, z: 1000
                    }, 1000)
                    .easing(TWEEN.Easing.Quadratic.InOut)
                    .start();
                new TWEEN.Tween(camera.position)
                    .to({x: 0, y: 400, z: 1300}, 1000)
                    .easing(TWEEN.Easing.Quadratic.InOut)
                    .start();
            })
            .start();
    }


    // 初始化性能插件
    function initStats() {
        const stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.body.appendChild(stats.domElement);
        return stats;
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        composer.render();
        stats.update();
        controls.update();
        TWEEN.update();
    }
</script>

</body>
</html>